<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<a class="navbar-header" href="">
			<img src="../images/ph.png" alt="">
			<div>
				<span>Nifty</span>
			</div>
		</a>
	</header>
	<div class="boxed">
		<div class="menu-wrap">
			<ul>
				<li class="list-header">Navigation</li>
				<li class="active-link">
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				<li/>
				<li class="list-divider"></li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
				<li class="list-header">Components</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content-container">
			<div class="common-tit">
				<h2>服务数据</h2>
				<span>数据统计 > 服务数据</span>
				<!-- <div class="cours-gbtn">
					<div class="list-box">
						<div class="downbtn">
							<span>异常状态</span>
							<em></em>
						</div>
						<ul class="dropdown-menu">
							<li>测试测试</li>
							<li>我们</li>
							<li>测试测试测试</li>
							<li>asdfasdfsaf	</li>
						</ul>
					</div>
				</div> -->
			</div>
			<div class="xdata-box">
				<h3>总计</h3>
				<ul>
					<li>
						<span>156</span>
						<em>销售业绩(人)</em>
					</li>
				</ul>
				<div id="saleCon"></div>
			</div>
			<div class="pdata-box clearfix">
				<h3>
					<span>服务顾问排行榜</span>
					<div class="pda-tit">
						<em class="pda-sel">业绩排行</em>
						<em>评价排行</em>
					</div>
				</h3>
				<div id="markRanking"></div>
			</div>
		</div>
	</div>
	<script src="../js/echarts.common.min.js"></script>
	<script src="../js/common.js"></script>
	<script>
	// 导师课消
		var myChart = echarts.init(document.getElementById('saleCon'));
		var xAxisData = [];
		var data1 = [];
		var data2 = [];
		var data3 = [];
		for (var i = 0; i < 30; i++) {
			if (i < 10) {
				 xAxisData.push('2016-10-0' + (i + 1));
			} else {
				 xAxisData.push('2016-10-' + (i + 1));
			}
		   	data1.push(Math.abs((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5));
		    data2.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
		    data3.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
		}

		option = {
		    legend: {
		        data: ['销售业绩(元)'],
		        align: 'left'
		    },
		    toolbox: {
		        // y: 'bottom',
		        feature: {
		            magicType: {
		                type: ['stack', 'tiled']
		            },
		            dataView: {},
		            saveAsImage: {
		                pixelRatio: 2
		            }
		        }
		    },
		    tooltip: {},
		    xAxis: {
		        data: xAxisData,
		        silent: false,
		        splitLine: {
		            show: false
		        }
		    },
		    yAxis: {
		    },
		    toolbox: {
		         show : true,
		    },
		    dataZoom: [{
	           startValue: '2016-10-09'
	        }, {
	            type: 'inside'
	        }],
		    series: [{
		        name: '销售业绩(元)',
		        type: 'bar',
		        data: data1,
		        animationDelay: function (idx) {
		            return idx * 10;
		        }
		    }],
		    animationEasing: 'elasticOut',
		    animationDelayUpdate: function (idx) {
		        return idx * 5;
		    }
		};
		myChart.setOption(option);
		// 市场专员排行榜
		var myChart1 = echarts.init(document.getElementById('markRanking'));
		option1 = {
		    tooltip: {
		        trigger: 'axis',
		    },
		    legend: {
		        data: ['2011年', '2012年']
		    },
		    grid: {
		        left: '10%',
		        right: '4%',
		        top: '1%',
		        containLabel: false
		    },
		    toolbox: {
		         show : true,
		     },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01]
		    },
		    yAxis: {
		        type : 'category',
		         axisLabel:{
		                 interval:0,
		                 rotate:45,
		                 margin:2,
		                 textStyle:{
		                    color:"#222"
		                 }},
		        data: ['名字1','名字2','名字3','名字4','名字5','人名6','名字7','名字8','名字9','名字10']
		    },
		    series: [
		        {
		            name: '今天',
		            type: 'bar',
		            data: [18203, 23489, 29034, 104970, 131744, 630230, 430230, 230230, 730230, 530230]
		        }
		        // ,
		        // {
		        //     name: '昨天',
		        //     type: 'bar',
		        //     data: [88203, 33489, 79034, 404970, 331744, 630230, 330230, 630230, 330230, 530230]
		        // },
		        // {
		        //     name: '过去7天',
		        //     type: 'bar',
		        //     data: [48203, 23489, 89034, 504970, 731744, 430230, 230230, 430230, 230230, 430230]
		        // }, 
		        // {
		        //     name: '过去30天',
		        //     type: 'bar',
		        //     data: [38203, 43489, 59034, 604970, 431744, 630230, 230230, 730230, 330230, 830230]
		        // }

		    ]
		};

		myChart1.setOption(option1);

		//  切换  业绩排行  评价排行
		//假数据
		var testObj = {
			"yj" : [{
				dataY: ['名字1','名字2','名字3','名字4','名字5','人名6','名字7','名字8','名字9','名字10'],
				dataX: [18203, 23489, 29034, 104970, 131744, 630230, 430230, 230230, 730230, 530230]
			}],
			"hf" : [{
				dataY: ['评价名字1','评价名字2','评价名字3','评价名字4','评价名字5','评价名字6','评价名字7','评价名字8','评价名字9','评价名字10'],
				dataX: [78203, 43489, 89034, 14970, 91744, 430230, 730230, 230230, 430230, 230230]
			}]
		}
		$(".pda-tit em").on("click", function() {
			if ($(this).index() == 0) {
				myChart1.setOption({
			        yAxis: {
			        	data: testObj.yj[0].dataY
			        },
				    series: [{
				        data: testObj.yj[0].dataX
				    }]
				});
			} else {
				myChart1.setOption({
			        yAxis: {
			        	data: testObj.hf[0].dataY
			        },
				    series: [{
				        data: testObj.hf[0].dataX
				    }]
				});
			}
			if (!$(this).hasClass("pda-sel")) {
				$(this).addClass("pda-sel").siblings().removeClass("pda-sel");
			};
		})

	</script>
</body>
</html>